<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>教学统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title" style="margin-top:20px;">
                <i class="iconfont icon-yunongtongshenfenzhenghaoma"></i> 教师信息
                <!-- <div class="content-title-btn-box">
                    <el-button type="primary">教学统计报告</el-button>
                </div> -->
            </div>
            <div class="statistics-bg statistics-info">
                <div class="statistics-avatar">
                    <i class="iconfont icon-jiaolian1"></i>
                    <span>{{ sysUser.userName }}</span>
                    <div class="statistics-xian"></div>
                </div>
                <div class="statistics-info-detail">
                    <ul>
                        <li>
                            <i class="iconfont icon-yunongtongshenfenzhenghaoma"></i>
                            <span>{{ sysUser.userNumber }}</span>
                        </li>
                        <li>
                            <i class="iconfont icon-xingbie---"></i>
                            <span>{{ sysUser.userSex == 'm' ? '男' : '女' }}</span>
                        </li>
                        <li>
                            <i class="iconfont icon-dianhua2"></i>
                            <span>{{ sysUser.telephone  }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-icon"></i> 教学统计分析
            </div>
            <div class="statistics-bg statistics-teaching">
                <div class="teaching-activity">
                    <div class="statistics-teaching-title">
                        <span></span>
                        教学活跃度
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.stuNum }}</span>
                            <span class="col-text">学习人数</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.testAverageTime }}</span>
                            <span class="col-text">案例实训平均时长</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.uploadProjectNum }}</span>
                            <span class="col-text">上传案例数</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.uploadToolFileNum }}</span>
                            <span class="col-text">上传常用工具文件数</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ sysUser.registerTimeString }}</span>
                            <span class="col-text">注册时间</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.teachClassNum }}</span>
                            <span class="col-text">教授班级数量</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.teachProjectNum }}</span>
                            <span class="col-text">教授案例数量</span>
                        </el-col>
                        <el-col :span="6">
                            <span class="col-num">{{ listData.reportCheckRate }}%</span>
                            <span class="col-text">案例报告批改率</span>
                        </el-col>
                    </el-row>
                </div>
                <div class="teaching-grade">
                    <!-- <div class="statistics-teaching-title">
                        <span></span>
                        教学成绩
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <span class="col-num">{{ listData.averageAchievement }}分</span>
                            <span class="col-text">平均成绩</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="col-num">{{ listData.totalAchievement }}分</span>
                            <span class="col-text">总成绩</span>
                        </el-col>
                    </el-row> -->
                    <div class="statistics-teaching-title">
                        <span></span>
                        教学成果
                    </div>
                    <div style="width: 100%;height:110px; margin-top: 65px;" id="teaching-echarts"></div>
                    <div class="echarts-text">
                        <el-col :span="12" align="center">及格率</el-col>
                        <el-col :span="12" align="center">案例报告提交率</el-col>
                    </div>
                </div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-tongji9"></i>案例统计分析
            </div>
            <div class="statistics-analysis-tip" v-if="projectStatisticsVOList.length == 0">
                暂无统计分析
            </div>
            <div class="statistics-analysis-item " v-else v-for="(item, index) in projectStatisticsVOList" :class=" index%2 == 0 ? 'item-first' : 'item-second'">
                <div class="statistics-analysis-title">
                    <div class="title-fl">
                        <span></span>{{ item.projectName }}
                    </div>
                    <div class="title-fr">
                        <router-link :to="{ path: '/teacher/classTrainingStatisticsDetail', query: {projectId: item.projectId }}">
                            班级详情<i class="iconfont icon-31leimu"></i>
                        </router-link>
                    </div>
                </div>
                <div class="statistics-analysis-box">
                    <el-row>
                        <el-col>
                            <span class="col-num">{{ item.stuNum }}</span>
                            <span class="col-text">学习人数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.enterProjectEnvironmentNum }}</span>
                            <span class="col-text">进入虚拟环境次数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.enterProjectNum }}</span>
                            <span class="col-text">查看案例数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.viewPresetItemTotalNum }}</span>
                            <span class="col-text">进入教学模式次数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.viewCustomItemTotalNum }}</span>
                            <span class="col-text">进入练习模式次数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.totalTestTime }}</span>
                            <span class="col-text">案例实训总时长</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.averageTestTime }}</span>
                            <span class="col-text">案例实训平均时长</span>
                        </el-col>
                        <!-- <el-col>
                            <pie-echart :id="'analysis-echarts'+(index+1)" :data="options[index]" style="width: 100%;height:110px;"></pie-echart>
                            <div class="echarts-text">
                                <ul>
                                    <li>及格率</li>
                                    <li>案例报告提交率</li>
                                    <li>案例报告批改率</li>
                                </ul>
                            </div>
                        </el-col> -->
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import macarons from 'node_modules/echarts/theme/macarons.js'
    import pieEchart from './../../components/pieEchart.vue'
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            pieEchart,
            BreadCrumbBack
        },
        data () {
            return {
                listData: '',
                sysUser: '',
                passRate: '',   //及格率
                reportCheckRate: '',//批改率
                reportSubmitRate: '',   //提交率
                projectStatisticsVOList: [],    //课程统计分析
                chartColumn: null,
                // options: []
            }
        },
        created () {
            let self = this
            this.init() //初始化
        },
        mounted (){
            let self = this

        },
        methods: {
            init(){
                let self = this
                self.$http.post('/dataplatform/basis/functions/statistics/t/getTeacherStatistics').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.listData = res.data
                        self.sysUser = res.data.sysUser
                        self.passRate = res.data.passRate
                        self.reportCheckRate = res.data.reportCheckRate
                        self.reportSubmitRate = res.data.reportSubmitRate
                        self.projectStatisticsVOList = res.data.projectStatisticsVOList
                        this.drawShape()
                        // for(let i = 0; i < res.data.projectStatisticsVOList.length; i++){
                        //     let json = {
                        //         series: [
                        //             {
                        //                 name:'及格率',
                        //                 type:'pie',
                        //                 radius: ['60%', '72%'],
                        //                 center : ['17%', '60%'],
                        //                 avoidLabelOverlap: false,
                        //                 hoverAnimation: false,
                        //                 itemStyle : {
                        //                     normal : {
                        //                         label : {
                        //                             show : false   //隐藏标示文字
                        //                         },
                        //                         labelLine : {
                        //                             show : false   //隐藏标示线
                        //                         }
                        //                     }
                        //                 },
                        //                 data:[
                        //                     {
                        //                         value: (100-res.data.projectStatisticsVOList[i].passRate),
                        //                         name:''+(100-res.data.projectStatisticsVOList[i].passRate)+'%',
                        //                         itemStyle: {
                        //                             color: ''
                        //                         }
                        //                     },
                        //                     {
                        //                         value: res.data.projectStatisticsVOList[i].passRate,
                        //                         name: ''+res.data.projectStatisticsVOList[i].passRate == 0 ? (0+'%') : res.data.projectStatisticsVOList[i].passRate+'%',
                        //                         label: {
                        //                             show: true,
                        //                             position: 'center',
                        //                             color: '#fff',
                        //                             fontSize: 20,
                        //                             formatter: '{b}',
                        //                             textStyle: {
                        //                                 baseline : 'bottom'
                        //                             },
                        //                         },
                        //                         itemStyle: {
                        //                             color: 'rgba(0,0,0,0)'
                        //                         },
                        //                         emphasis:{
                        //                             itemStyle: {
                        //                                 color: '#000'
                        //                             }
                        //                         }
                        //                     }
                        //                 ]
                        //             },
                        //             {
                        //                 name:'案例报告提交率',
                        //                 type:'pie',
                        //                 radius: ['60%', '72%'],
                        //                 center : ['49%', '60%'],
                        //                 avoidLabelOverlap: false,
                        //                 hoverAnimation: false,
                        //                 itemStyle : {
                        //                     normal : {
                        //                         label : {
                        //                             show : false   //隐藏标示文字
                        //                         },
                        //                         labelLine : {
                        //                             show : false   //隐藏标示线
                        //                         }
                        //                     }
                        //                 },
                        //                 data:[
                        //                     {
                        //                         value: (100-res.data.projectStatisticsVOList[i].reportSubmitRate),
                        //                         name:''+(100-res.data.projectStatisticsVOList[i].reportSubmitRate)+'%',
                        //                         itemStyle: {
                        //                             color: ''
                        //                         }
                        //                     },
                        //                     {
                        //                         value: res.data.projectStatisticsVOList[i].reportSubmitRate,
                        //                         name: ''+res.data.projectStatisticsVOList[i].reportSubmitRate == 0 ? (0+'%') : res.data.projectStatisticsVOList[i].reportSubmitRate+'%',
                        //                         label: {
                        //                             show: true,
                        //                             position: 'center',
                        //                             color: '#fff',
                        //                             fontSize: 20,
                        //                             formatter: '{b}',
                        //                             textStyle: {
                        //                                 baseline : 'bottom'
                        //                             }
                        //                         },
                        //                         itemStyle: {
                        //                             color: 'rgba(0,0,0,0)'
                        //                         },
                        //                         emphasis:{
                        //                             itemStyle: {
                        //                                 color: '#000'
                        //                             }
                        //                         }
                        //                     }
                        //                 ]
                        //             },
                        //             {
                        //                 name:'案例报告批改率',
                        //                 type:'pie',
                        //                 radius: ['60%', '72%'],
                        //                 center : ['82%', '60%'],
                        //                 avoidLabelOverlap: false,
                        //                 hoverAnimation: false,
                        //                 itemStyle : {
                        //                     normal : {
                        //                         label : {
                        //                             show : false   //隐藏标示文字
                        //                         },
                        //                         labelLine : {
                        //                             show : false   //隐藏标示线
                        //                         }
                        //                     }
                        //                 },
                        //                 data:[
                        //                     {
                        //                         value: (100-res.data.projectStatisticsVOList[i].reportCheckRate),
                        //                         name:''+(100-res.data.projectStatisticsVOList[i].reportCheckRate)+'%',
                        //                         itemStyle: {
                        //                             color: ''
                        //                         }
                        //                     },
                        //                     {
                        //                         value: res.data.projectStatisticsVOList[i].reportCheckRate,
                        //                         name: ''+res.data.projectStatisticsVOList[i].reportCheckRate == 0 ? (0+'%') : res.data.projectStatisticsVOList[i].reportCheckRate+'%',
                        //                         label: {
                        //                             show: true,
                        //                             position: 'center',
                        //                             color: '#fff',
                        //                             fontSize: 20,
                        //                             formatter: '{b}',
                        //                             textStyle: {
                        //                                 baseline : 'bottom'
                        //                             }
                        //                         },
                        //                         itemStyle: {
                        //                             color: 'rgba(0,0,0,0)'
                        //                         },
                        //                         emphasis:{
                        //                             itemStyle: {
                        //                                 color: '#000'
                        //                             }
                        //                         }
                        //                     }
                        //                 ]
                        //             }
                        //         ]
                        //     }
                        // }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            drawShape(){
                let self = this
                self.chartColumn = echarts.init(document.getElementById('teaching-echarts'), 'macarons');
                console.log(self.passRate)
                let options = {
                    series: [
                        {
                            name:'及格率',
                            type:'pie',
                            radius: ['50%', '60%'],
                            center : ['25%', '45%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: (100-self.passRate),
                                    name:''+(100-self.passRate)+'%',
                                    itemStyle: {
                                        color: '#58a8e8'
                                    }
                                },
                                {
                                    value: self.passRate,
                                    name: ''+self.passRate == 0 ? (0+'%') : self.passRate+'%',
                                    label: {
                                        show: true,
                                        position: 'center',
                                        color: '#408ee6',
                                        fontSize: 20,
                                        formatter: '{b}',
                                        textStyle: {
                                            baseline : 'bottom'
                                        },
                                    },
                                    itemStyle: {
                                        color: '#ebeae6'
                                    },
                                    emphasis:{
                                        itemStyle: {
                                            color: '#ebeae6'
                                        }
                                    },
                                }
                            ]
                        },
                        {
                            name:'案例报告提交率',
                            type:'pie',
                            radius: ['50%', '60%'],
                            center : ['75%', '45%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: (100-self.reportSubmitRate),
                                    name:''+(100-self.reportSubmitRate)+'%',
                                    itemStyle: {
                                        color: '#58a8e8'
                                    }
                                },
                                {
                                    value: self.reportSubmitRate,
                                    name: ''+self.reportSubmitRate == 0 ? (0+'%') : self.reportSubmitRate+'%',
                                    label: {
                                        show: true,
                                        position: 'center',
                                        color: '#408ee6',
                                        fontSize: 20,
                                        formatter: '{b}',
                                        textStyle: {
                                            baseline : 'bottom'
                                        }
                                    },
                                    itemStyle: {
                                        color: '#ebeae6'
                                    }
                                }
                            ]
                        }
                    ]
                }
                this.chartColumn.setOption(options)
            }
        }
    }
</script>
